<template>
    <div class="modal" v-if="isShos">
         <div class="directions">
            <div class="title">停车场费用说明</div>
            <div class="info">
              <div v-for="item,i of explain" :key="i">
                {{item.REMARK}}： {{item.PVALUES}}
              </div>
            </div>
            <div class="btn" @touchstart="hideModal">
                  知道了
            </div>
        </div>
        <div class="piece" @touchstart="hideModal"></div>
    </div>
</template>
<script>
export default {
	data () {
		return {
			explain : [],
			isShos: false
		}
	},
	methods : {
		showModal () {
      this.axios.get("/order/seachPublic",{
        params : {
          tname : "费用说明",
          pcode : ""
        }
      }).then(res=>{
        if (res.data.success) {
          this.isShos = true
          this.explain = res.data.data.Values;
        } else {
          alert(res.data.message);
        }
      })
		},
		hideModal () {
		  this.isShos = false
		}
	}
}
</script>
<style lang="scss" scoped>
.btn{
    width: 2.8rem;
    height: 0.8rem;
    margin: 0 auto;
    margin-top: 0.2rem;
    display: block;
    color: #fff;
    text-align: center;
    line-height: 0.8rem;
    font-size: 0.3rem;
    background: url('../../assets/images/btn.png') 100% 100% no-repeat;
    background-size: cover;
    background-size: 100% 100%;
}
.modal {
   position: fixed;
   left: 0px;
   top: 0px;
   width: 100%;
   height: 100%;
   z-index: 2;
   display: flex;
   align-items: center;
   justify-content: center;
   .directions{
      width: 5.6rem;
      height: 5.2rem;
      background: #fff;
      border-radius: 0.2rem;
      .title{
        height: 1rem;
        text-align: center;
        font-size: 0.35rem;
        border-radius: 0.2rem 0.2rem 0 0;
        background: #0085F5;
        color: #fff;
        line-height: 1rem;
      }
      .info{
        margin-top: 0.3rem;
        font-size: 0.3rem;
        line-height: 0.6rem;
        padding: 0 0.4rem;
        box-sizing: border-box;
      }
   }
}
.piece{
  position: fixed;
  left: 0px;
  top: 0px;
  z-index: -1;
  width: 100%;
  height: 100%;
  background: rgba($color: #000000, $alpha: 0.4);
}
</style>
